<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HTML5/CSS3炫酷阴影发光文字特效组合DEMO演示</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    html,
    body {
        min-height: 100vh;
        margin: 0;
    }

html {
    background: #090000;
    font-size: calc(1em + 3vmax);
    line-height: 1.1;
    text-align: center;
}
div {
    --interval: 1s;
    display: block;
    text-shadow: 
    0 0 10px var(--color1),
    0 0 20px var(--color2),
    0 0 40px var(--color3),
    0 0 80px var(--color4);
    will-change: filter, color;
    filter: saturate(60%);
    animation: flicker steps(100) var(--interval) 1s infinite;
}

div:nth-of-type(1) {
    color: yellow;
    --color1: goldenrod;
    --color2: orangered;
    --color3: mediumblue;
    --color4: purple;
}

div:nth-of-type(2) {
    color: lightpink;
    --color1: pink;
    --color2: orangered;
    --color3: red;
    --color4: magenta;
}

div:nth-of-type(3) {
    color: lightyellow;
    --color1: yellow;
    --color2: lime;
    --color3: green;
    --color4: mediumblue;
}

div:nth-of-type(4) {
    color: lightyellow;
    --color1: gold;
    --color2: firebrick;
    --color3: pink;
    --color4: red;
}


div:nth-of-type(5) {
    color: azure;
    --color1: azure;
    --color2: aqua;
    --color3: dodgerblue;
    --color4: blue;
}

div:nth-of-type(6) {
    color: tomato;
    --color1: orangered;
    --color2: firebrick;
    --color3: maroon;
    --color4: darkred;
}

div:nth-of-type(7) {
    color: lightyellow;
    --color1: yellow;
    --color2: orange;
    --color3: brown;
    --color4: purple;
}

div:nth-of-type(8) {
    color: yellow;
    --color1: yellow;
    --color2: lime;
    --color3: green;
    --color4: darkgreen;
}

div:nth-of-type(9) {
    color: lightyellow;
    --color1: yellow;
    --color2: gold;
    --color3: orange;
    --color4: darkred;
}

@keyframes flicker {
    50% {
        /*饱和度和色相反转*/
        filter: saturate(200%) hue-rotate(20deg);
    }
}
  </style>
</head>

<body>
<div class="box">
    <div>HTML</div>
    <div>HTML</div>
    <div>HTML</div>
    <div>HTML</div>
    <div>HTML</div>
    <div>HTML</div>
    <div>HTML</div>
    <div>HTML</div>
    <div>HTML</div>
</div>

<script>
const signs = document.querySelectorAll('x-sign')
const randomIn = (min, max) => (
  Math.floor(Math.random() * (max - min + 1) + min)
)

const mixupInterval = el => {
  const ms = randomIn(2000, 4000)
  el.style.setProperty('--interval', `${ms}ms`)
}

signs.forEach(el => {
  mixupInterval(el)
  el.addEventListener('webkitAnimationIteration', () => {
    mixupInterval(el)
  })
})
</script>
</body>
</html>
